<template>
    <div class="home">

        <validate-group v-model="form.flag" ref="vailForm" :ext-rules="extRules" :root="this">
            <validate-field label="kuzma" :prop="form.input1" regex="require" required="required">
                <input v-model="form.input1">
                <div slot="error">sfasdfdfasdf</div>
            </validate-field>
            <validate-field label="kuzma" :prop="form.input2" regex="xxlokit" required="(选填)">
                <input v-model="form.input2">
                <div slot="error">input xxlokit</div>
            </validate-field>
            <validate-field label="kuzma" :prop="form.input3" regex="telphone" required="(选填)">
                <input v-model="form.input3">
                <div slot="error">sfasdfdfasdf</div>
            </validate-field>
            <validate-field label="howard" :prop="form.input4" regex="remote" required="required">
                <input v-model="form.input4">
                <div slot="error">sfasdfdfasdf</div>
            </validate-field>
        </validate-group>
        <button @click="vailIt">submit</button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello world!',
                form:{
                    flag:false,
                    input1:"",
                    input2:"",
                    input3:"",
                    input4:"",
                },
                extRules:{
                    xxlokit(val){
                        if(val!=this.form.input1){
                            return true
                        }else{
                            return false
                        }
                    },
                    remote(value,app){
                        $.ajax({
                            url:"http://10.70.7.225:3000/remote/valid",
                            data:{
                                value
                            },
                            success(res){
                                if(res.isValid){
                                    app.SetStatus('pass')
                                }else{
                                    app.SetStatus('invalid')
                                }
                            }
                        })
                        return 'pending'
                    }
                }
            }
        },
        created(){
            console.log(this)
        },
        methods:{
            vailIt(){
                this.$refs['vailForm'].ValiWholeField()
            },
        }
    }
</script>

<style lang="scss">@import './home.scss';</style>